<template>
	<loading v-if="isLoading"></loading>
	<view class="tn-pb-sm" v-else>
		<tn-form label-position="top">
			<view class="tn-p">
				<tn-form-item label="创建时间">
					<tn-input v-model="orderInfo.add_time" disabled />
				</tn-form-item>
				<tn-form-item label="订单状态">
					<tn-input v-model="statusMap[orderInfo.status]" disabled />
				</tn-form-item>
				<tn-form-item label="订单编号">
					<tn-input v-model="orderInfo.order_no" disabled />
				</tn-form-item>
			</view>

			<view class="gap" style="margin:0"></view>

			<view class="tn-p">
				<tn-form-item label="采购商家">
					<tn-input type="textarea" v-model="orderInfo.seller_name" disabled />
				</tn-form-item>
				<tn-form-item label="收货人姓名">
					<tn-input v-model="orderInfo.contact_name" disabled />
				</tn-form-item>
				<tn-form-item label="收货人电话">
					<tn-input v-model="orderInfo.contact_phone" disabled />
				</tn-form-item>
				<tn-form-item label="收货人地址">
					<tn-input type="textarea" v-model="orderInfo.address" disabled />
				</tn-form-item>
				<tn-form-item label="商品备注" v-if="orderInfo.remark">
					<tn-input type="textarea" v-model="orderInfo.remark" disabled />
				</tn-form-item>
			</view>

			<view class="gap" style="margin:0"></view>

			<view class="tn-p tn-pb-sm border_bottom" v-if="orderInfo.product" v-for="item in orderInfo.product"
				:key="item.id">
				<view class="tn-flex items-center justify-between">
					<view class="tn-flex items-center">
						<tn-avatar shape="square"
							:url="item.goods_thumb?item.goods_thumb:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
							size="xl" />
						<view class="tn-ml-sm tn-flex tn-flex-column tn-text-xs tn-flex-1">
							<text class="tn-mr-xs tn-text-ellipsis-1">商品名称：{{item.goods_name}}</text>
							<text style="margin-top:1px" class="tn-text-ellipsis-1">
								商品单价：{{item.goods_price}} 元
								<text style="text-decoration: line-through;color: #AAAAAA;"
									class="tn-ml-sm">{{item.delete_price}} 元</text>
							</text>
							<text class="tn-mr-xs tn-text-ellipsis-1">合计总价：{{item.amount}} 元</text>
							<text style="margin-top:1px" class="tn-text-ellipsis-1">下单数量：{{item.buy_num}} /
								{{item.unit}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-p">
				<tn-form-item label="采购总价">
					<tn-input v-model="orderInfo.price" disabled />
				</tn-form-item>
				<tn-form-item label="商品成本">
					<tn-input v-model="orderInfo.cost_amount" disabled />
				</tn-form-item>
			</view>

			<template v-if="orderInfo.status!==0">
				<view class="gap" style="margin:0"></view>
				<view class="tn-p">
					<tn-form-item label="接单时间" v-if="orderInfo.accept_time">
						<tn-input v-model="orderInfo.accept_time" disabled />
					</tn-form-item>
					<tn-form-item label="配送时间" v-if="orderInfo.deliver_time">
						<tn-input v-model="orderInfo.deliver_time" disabled />
					</tn-form-item>
					<tn-form-item label="预计送达" v-if="orderInfo.expect_time">
						<tn-input v-model="orderInfo.expect_time" disabled />
					</tn-form-item>
					<tn-form-item label="完成时间" v-if="orderInfo.finish_time">
						<tn-input v-model="orderInfo.finish_time" disabled />
					</tn-form-item>
					<tn-form-item label="完成备注" v-if="orderInfo.finish_mark">
						<tn-input type="textarea" v-model="orderInfo.finish_mark" disabled />
					</tn-form-item>
				</view>
			</template>

			<template v-if="orderInfo.status==6">
				<view class="gap" style="margin:0"></view>
				<view class="tn-p">
					<tn-form-item label="售后图片" v-if="orderInfo.refund_images&&orderInfo.refund_images.length>0">
						<tn-photo-album :data="orderInfo.refund_images" />
					</tn-form-item>
					<tn-form-item label="售后原因" v-if="orderInfo.refund_mark">
						<tn-input v-model="orderInfo.refund_mark" disabled />
					</tn-form-item>
					<tn-form-item label="申请金额">
						<tn-input v-model="orderInfo.refund_price" disabled />
					</tn-form-item>
					<tn-form-item label="退款状态">
						<tn-input v-model="refundStatusMap[orderInfo.refund_status]" disabled />
					</tn-form-item>
				</view>
			</template>
		</tn-form>
		<view class="tn-flex-center">
			<tn-button size="lg" width="80vw" height="80" font-size="26" @click="confirmDelivery(0)"
				v-if="orderInfo.status==1">确定发货</tn-button>
			<tn-button size="lg" type="success" width="80vw" height="80" font-size="26" @click="confirmDelivery(1)"
				v-else-if="orderInfo.status==3">确定收货</tn-button>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		getSpecialOrderDetailApi,
		specialDeliveryApi
	} from '@/request/worktop/system.js'
	import {
		onMounted,
		ref
	} from 'vue';

	const props = defineProps(['orderId'])

	const isLoading = ref(true)

	const statusMap = {
		0: '已下单',
		1: '已接单',
		3: '配送中',
		4: '已取消',
		5: '已完成',
		6: '售后',
	}
	const refundStatusMap = {
		0: "未退款",
		1: "申请中",
		2: "部分退款",
		3: "全额退款",
		4: "拒绝退款"
	}

	onMounted(() => {
		getSpecialOrderDetail()
	})

	const modalRef = ref()

	const orderInfo = ref(null)

	// 获取特价订单详情
	const getSpecialOrderDetail = () => {
		getSpecialOrderDetailApi(props.orderId).then(res => {
			if (res.code == 0) {
				orderInfo.value = res.data
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 确定发货
	const confirmDelivery = (type = 0) => {
		modalRef.value?.showModal({
			title: '提示',
			content: `是否确定${type == 0 ? '发货' : '收货'}吗？`,
			showCancel: true,
			confirm: () => {
				specialDeliveryApi(orderInfo.value.id, type).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							success() {
								setTimeout(() => {
									getSpecialOrderDetail()
								}, 800)
							}
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		})
	}
</script>

<style scoped lang="scss">

</style>